<template>
  <div class="dashboard-editor-container type-box pl20 pr20">
    <el-card class="box-card mb6">
      <div class="mb10">全院不良事件汇总统计</div>
      <el-form ref="listQuery" :model="listQuery" :inline="true">
        <el-form-item label="" prop="nodeName" class="mb0">
          <el-select v-model="listQuery.timeType" placeholder="" size="small" style="width: 160px" @change="getList">
            <el-option label="事件上报日期" value="create" />
            <el-option label="事件发生日期" value="fsrq" />
          </el-select>
        </el-form-item>
        <el-form-item label="" class="mb0">
          <el-date-picker v-model="timeValue" clearable size="small" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="getList" />
        </el-form-item>
        <el-form-item class="mb0">
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList">查询</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card mb6">
      <div class="header clearfix flex flex-row align-center pl0 pt0" style="border-bottom: 0px;">
        <div class="line" />
        <span class="font18 ml10 flex-auto">不良事件汇总统计</span>
      </div>
      <div>{{ timeStart }} 至 {{ timeEnd }}，多部门接收主动上报不安全事件：{{ qualityInfo.allCount }}（例）</div>
      <div class="top-charts mt20">
        <div ref="topCharts" class="height500" />
      </div>
    </el-card>
    <el-card class="box-card mb6">
      <div class="header clearfix flex flex-row align-center pl0 pt0" style="border-bottom: 0px;">
        <div class="line" />
        <span class="font18 ml10 flex-auto">不良事件具体分布统计</span>
      </div>
      <div class="statis-table">
        <div class="statis-header flex align-center">
          <div class="width20p text-center">不良事件7大类</div>
          <div class="width20p text-center">不良事件13分类</div>
          <div class="width15p text-center">发生数量（例）</div>
          <div class="width45p">事件占比</div>
        </div>
        <div class="statis-body">
          <div class="statis-item flex align-center">
            <div class="width20p text-center height250 line-height-250">诊疗相关</div>
            <div class="width20p text-center height250">
              <div class="line-height-50">医疗处置事件</div>
              <div class="line-height-50">报告、标本差错事件</div>
              <div class="line-height-50">饮食差错事件</div>
              <div class="line-height-50">输液反应事件</div>
              <div class="line-height-50">其他不良事件</div>
            </div>
            <div class="width15p text-center height250">
              <div class="line-height-50">{{ qualityInfo.staticsCounts[0] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[1] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[2] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[3] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[4] }}</div>
            </div>
            <div class="width45p height250">
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[0])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[1])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[2])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[3])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[4])" class="my-progress" :stroke-width="20" />
              </div>
            </div>
          </div>
          <div class="statis-item flex align-center">
            <div class="width20p text-center height100 line-height-100">药物相关</div>
            <div class="width20p text-center height100">
              <div class="line-height-50">药物不良反应事件</div>
              <div class="line-height-50">给药错误事件</div>
            </div>
            <div class="width15p text-center height100">
              <div class="line-height-50">{{ qualityInfo.staticsCounts[5] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[6] }}</div>
            </div>
            <div class="width45p height100">
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[5])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[6])" class="my-progress" :stroke-width="20" />
              </div>
            </div>
          </div>
          <div class="statis-item flex align-center">
            <div class="width20p text-center height50 line-height-50">医疗器械相关</div>
            <div class="width20p text-center height50">
              <div class="line-height-50">医疗器械事件</div>
            </div>
            <div class="width15p text-center height50">
              <div class="line-height-50">{{ qualityInfo.staticsCounts[7] }}</div>
            </div>
            <div class="width45p height50">
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[7])" class="my-progress" :stroke-width="20" />
              </div>
            </div>
          </div>
          <div class="statis-item flex align-center">
            <div class="width20p text-center height50 line-height-50">医患沟通相关</div>
            <div class="width20p text-center height50">
              <div class="line-height-50">医患沟通（纠纷）事件</div>
            </div>
            <div class="width15p text-center height50">
              <div class="line-height-50">{{ qualityInfo.staticsCounts[8] }}</div>
            </div>
            <div class="width45p height50">
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[8])" class="my-progress" :stroke-width="20" />
              </div>
            </div>
          </div>
          <div class="statis-item flex align-center">
            <div class="width20p text-center height100 line-height-100">输血相关</div>
            <div class="width20p text-center height100">
              <div class="line-height-50">用血错误事件</div>
              <div class="line-height-50">输血反应事件</div>
            </div>
            <div class="width15p text-center height100">
              <div class="line-height-50">{{ qualityInfo.staticsCounts[9] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[10] }}</div>
            </div>
            <div class="width45p height100">
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[9])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[10])" class="my-progress" :stroke-width="20" />
              </div>
            </div>
          </div>
          <div class="statis-item flex align-center">
            <div class="width20p text-center height50 line-height-50">护理相关</div>
            <div class="width20p text-center height50">
              <div class="line-height-50">护理相关事件</div>
            </div>
            <div class="width15p text-center height50">
              <div class="line-height-50">{{ qualityInfo.staticsCounts[11] }}</div>
            </div>
            <div class="width45p height50">
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[11])" class="my-progress" :stroke-width="20" />
              </div>
            </div>
          </div>
          <div class="statis-item flex align-center">
            <div class="width20p text-center height50 line-height-50">院感相关</div>
            <div class="width20p text-center height50">
              <div class="line-height-50">院内感染不良事件</div>
            </div>
            <div class="width15p text-center height50">
              <div class="line-height-50">{{ qualityInfo.staticsCounts[12] }}</div>
            </div>
            <div class="width45p height50">
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[12])" class="my-progress" :stroke-width="20" />
              </div>
            </div>
          </div>
          <div class="statis-item flex align-center">
            <div class="width20p text-center height150 line-height-150">手术相关</div>
            <div class="width20p text-center height150">
              <div class="line-height-50">手术不良事件</div>
              <div class="line-height-50">操作不良事件</div>
              <div class="line-height-50">非计划再次手术事件</div>
            </div>
            <div class="width15p text-center height150">
              <div class="line-height-50">{{ qualityInfo.staticsCounts[13] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[14] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[15] }}</div>
            </div>
            <div class="width45p height150">
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[13])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[14])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[15])" class="my-progress" :stroke-width="20" />
              </div>
            </div>
          </div>
          <div class="statis-item flex align-center">
            <div class="width20p text-center height50 line-height-50">防保相关</div>
            <div class="width20p text-center height50">
              <div class="line-height-50">职业暴露不良事件</div>
            </div>
            <div class="width15p text-center height50">
              <div class="line-height-50">{{ qualityInfo.staticsCounts[16] }}</div>
            </div>
            <div class="width45p height50">
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[16])" class="my-progress" :stroke-width="20" />
              </div>
            </div>
          </div>
          <div class="statis-item flex align-center">
            <div class="width20p text-center height300 line-height-300">意外事件</div>
            <div class="width20p text-center height300">
              <div class="line-height-50">跌倒、坠床事件</div>
              <div class="line-height-50">出走事件</div>
              <div class="line-height-50">冲动伤人事件</div>
              <div class="line-height-50">噎食事件</div>
              <div class="line-height-50">自杀、自伤事件</div>
              <div class="line-height-50">其他意外事件</div>
            </div>
            <div class="width15p text-center height300">
              <div class="line-height-50">{{ qualityInfo.staticsCounts[17] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[18] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[19] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[20] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[21] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[22] }}</div>
            </div>
            <div class="width45p height300">
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[17])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[18])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[19])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[20])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[21])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[22])" class="my-progress" :stroke-width="20" />
              </div>
            </div>
          </div>

          <div class="statis-item flex align-center">
            <div class="width20p text-center height150 line-height-150">其他不良事件上报</div>
            <div class="width20p text-center height150">
              <div class="line-height-50">公共事件</div>
              <div class="line-height-50">治安事件</div>
              <div class="line-height-50">其他事件</div>
            </div>
            <div class="width15p text-center height150">
              <div class="line-height-50">{{ qualityInfo.staticsCounts[23] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[24] }}</div>
              <div class="line-height-50">{{ qualityInfo.staticsCounts[25] }}</div>
            </div>
            <div class="width45p height150">
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[23])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[24])" class="my-progress" :stroke-width="20" />
              </div>
              <div class="line-height-50 height50 pt15">
                <el-progress :percentage="getPercent(qualityInfo.staticsCounts[25])" class="my-progress" :stroke-width="20" />
              </div>
            </div>
          </div>
          <!-- <div class="mt20 pl20">{{timeStart}} 至 {{timeEnd}} 每百床不安全事件上报数：<span style="color:red">0</span> 起。</div>
          <div class="mt10 pl20">{{timeStart}} 至 {{timeEnd}} 每百出院人次不安全事件上报数：<span style="color:red">0</span> 起。</div>
          <div class="mt10 pl20">{{timeStart}} 至 {{timeEnd}} 主动上报不安全事件<span style="color:red">0</span> 起，{{timeStart}} 至 {{timeEnd}} 上报比例数同比 上升<span style="color:red"> 0.0%。</span></div> -->
        </div>
      </div>
    </el-card>
    <div class="width100p flex">
      <el-card class="box-card mb6 flex-auto">
        <div class="header clearfix flex flex-row align-center pl0 pt0" style="border-bottom: 0px;">
          <div class="line" />
          <span class="font18 ml10 flex-auto">事件上报人员</span>
        </div>
        <div ref="ryPie" class="height450" />
      </el-card>
      <el-card class="ml10 box-card mb6 flex-auto">
        <div class="header clearfix flex flex-row align-center pl0 pt0" style="border-bottom: 0px;">
          <div class="line" />
          <span class="font18 ml10 flex-auto">事件发生地点（例）</span>
        </div>
        <div class="flex width100p justify-content-center">
          <div class="right width120 mr50">
            <div class="el-progress el-progress--circle el-progress--text-inside" role="progressbar" :aria-valuenow="percentage" aria-valuemin="0" aria-valuemax="100">
              <div class="el-progress-circle width120 height120">
                <svg viewBox="0 0 100 100">
                  <path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth" fill="none" :style="trailPathStyle" />
                  <path class="el-progress-circle__path" :d="trackPath" :stroke="stroke" fill="none" stroke-linecap="round" :stroke-width="percentage ? relativeStrokeWidth : 0" :style="circlePathStyle" />
                </svg>
              </div>
              <div class="el-progress__text width120 circle-content height80">
                <div class="flex flex-column justify-content-center align-center height80">
                  <div class="font16">徐汇院区</div>
                  <div class="font26 mt10">{{ qualityInfo.hospitalCounts[0] }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="right width120">
            <div class="el-progress el-progress--circle el-progress--text-inside" role="progressbar" :aria-valuenow="percentage1" aria-valuemin="0" aria-valuemax="100">
              <div class="el-progress-circle width120 height120">
                <svg viewBox="0 0 100 100">
                  <path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth" fill="none" :style="trailPathStyle" />
                  <path class="el-progress-circle__path" :d="trackPath" :stroke="stroke1" fill="none" stroke-linecap="round" :stroke-width="percentage1 ? relativeStrokeWidth1 : 0" :style="circlePathStyle1" />
                </svg>
              </div>
              <div class="el-progress__text width120 circle-content height80">
                <div class="flex flex-column justify-content-center align-center height80">
                  <div class="font16">闵行院区</div>
                  <div class="font26 mt10">{{ qualityInfo.hospitalCounts[1] }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div ref="fsddBar" class="height330" />
      </el-card>
    </div>
    <div class="height50" />
    <!-- <el-card class="box-card mb6 flex-auto">

      <div class="header clearfix flex flex-row align-center pl0 pt0" style="border-bottom: 0px;">
          <div class="line"></div>
          <span class="font18 ml10 flex-auto">不安全事件汇总分析</span>
        </div>
        </el-card> -->
  </div>
</template>
<script>
import {
  qualityData
} from '@/api/baqsj/quality'
import * as echarts from 'echarts'
import moment from 'moment'
export default {
  name: 'BaqsjStatistics',
  components: {},
  data() {
    return {
      timeStart: '',
      timeEnd: '',
      color: 'rgba(107, 58, 161, 1)',
      status: 'success',
      type: 'circle',
      strokeWidth: '20',
      width: '200',
      percentage: 0,
      percentage1: 0,
      timeValue: '',
      currentType: 'yzcd',
      dialogVisible: false,
      todoTotal: 0,
      currentPage: 1,
      pagesize: 10,
      loading: false,
      qualityInfo: {
        allCount: 0,
        chartsCounts: [0, 0, 0, 0, 0, 0, 0],
        fsdd: { bq: 0, mjz: 0, jcs: 0, sys: 0, ggqy: 0, bm: 0, qt: 0 },
        hospitalCounts: [0, 0],
        staticsCounts: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      },
      listQuery: {
        timeType: 'create'
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      }
    }
  },
  computed: {
    barStyle() {
      const style = {}
      style.width = this.percentage + '%'
      style.backgroundColor = this.getCurrentColor(this.percentage)
      return style
    },
    barStyle1() {
      const style = {}
      style.width = this.percentage1 + '%'
      style.backgroundColor = this.getCurrentColor(this.percentage)
      return style
    },
    relativeStrokeWidth() {
      return ((this.strokeWidth / this.width) * 100).toFixed(1)
    },
    relativeStrokeWidth1() {
      return ((this.strokeWidth / this.width) * 100).toFixed(1)
    },
    radius() {
      if (this.type === 'circle' || this.type === 'dashboard') {
        return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10)
      } else {
        return 0
      }
    },
    radius1() {
      if (this.type === 'circle' || this.type === 'dashboard') {
        return parseInt(50 - parseFloat(this.relativeStrokeWidth1) / 2, 10)
      } else {
        return 0
      }
    },
    trackPath() {
      const radius = this.radius
      const isDashboard = this.type === 'dashboard'
      return `
          M 50 50
          m 0 ${isDashboard ? '' : '-'}${radius}
          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
          `
    },
    perimeter() {
      return 2 * Math.PI * this.radius
    },
    perimeter1() {
      return 2 * Math.PI * this.radius1
    },
    rate() {
      return this.type === 'dashboard' ? 0.75 : 1
    },
    strokeDashoffset() {
      const offset = (-1 * this.perimeter * (1 - this.rate)) / 2
      return `${offset}px`
    },
    strokeDashoffset1() {
      const offset = (-1 * this.perimeter1 * (1 - this.rate)) / 2
      return `${offset}px`
    },
    trailPathStyle() {
      return {
        strokeDasharray: `${this.perimeter * this.rate}px, ${this.perimeter}px`,
        strokeDashoffset: this.strokeDashoffset
      }
    },
    circlePathStyle() {
      return {
        strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100)}px, ${this.perimeter}px`,
        strokeDashoffset: this.strokeDashoffset,
        transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
      }
    },
    circlePathStyle1() {
      return {
        strokeDasharray: `${this.perimeter * this.rate * (this.percentage1 / 100)}px, ${this.perimeter1}px`,
        strokeDashoffset: this.strokeDashoffset1,
        transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
      }
    },
    stroke1() {
      return 'rgba(28, 84, 216, 1)'
    },
    stroke() {
      let ret
      if (this.color) {
        ret = this.getCurrentColor(this.percentage)
      } else {
        switch (this.status) {
          case 'success':
            ret = '#13ce66'
            break
          case 'exception':
            ret = 'rgba(28, 84, 216, 1)'
            break
          case 'warning':
            ret = '#e6a23c'
            break
          default:
            ret = '#20a0ff'
        }
      }
      return ret
    },
    iconClass() {
      if (this.status === 'warning') {
        return 'el-icon-warning'
      }
      if (this.type === 'line') {
        return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close'
      } else {
        return this.status === 'success' ? 'el-icon-check' : 'el-icon-close'
      }
    },
    progressTextSize() {
      return this.type === 'line' ? 12 + this.strokeWidth * 0.4 : this.width * 0.111111 + 2
    },
    content() {
      if (typeof this.format === 'function') {
        return this.format(this.percentage) || ''
      } else {
        return `${this.percentage}%`
      }
    }
  },
  watch: {
    timeValue(newVal, oldVal) {
      console.log(newVal)
      if (
        newVal === null ||
        newVal === undefined ||
        newVal === ''
      ) {
        this.timeStart = moment().startOf('year').format('YYYY-MM-DD')
        this.timeEnd = this.parseTime(new Date(), '{y}-{m}-{d}')
      } else {
        this.timeStart = this.parseTime(newVal[0], '{y}-{m}-{d}')
        this.timeEnd = this.parseTime(newVal[1], '{y}-{m}-{d}')
      }
    }
  },
  created() {
    this.timeStart = moment().startOf('year').format('YYYY-MM-DD')
    this.timeEnd = this.parseTime(new Date(), '{y}-{m}-{d}')
    this.getList()
  },
  mounted() {

  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    switchType(type) {
      this.currentType = type
      this.currentPage = 1
      this.pagesize = 10
    },
    resetQuery() {
      this.timeValue = ''
      this.resetForm('listQuery')
      this.getList()
    },
    getList() {
      this.loading = true
      this.currentPage = 1
      this.pagesize = 10
      if (
        this.timeValue === null ||
        this.timeValue === undefined ||
        this.timeValue === ''
      ) {
        this.listQuery.startTime = this.parseTime(this.timeStart)
        this.listQuery.endTime = this.parseTime(this.timeEnd)
      } else {
        this.listQuery.startTime = this.parseTime(this.timeValue[0])
        this.listQuery.endTime = this.parseTime(this.timeValue[1])
      }
      qualityData(this.listQuery).then(response => {
        this.qualityInfo = response.data
        this.loading = false
        this.percentage = this.getPercent(this.qualityInfo.hospitalCounts[0])
        this.percentage1 = this.getPercent(this.qualityInfo.hospitalCounts[1])
        this.$nextTick(() => {
          this.initTopCharts()
          this.initRyPie()
          this.initFsddBar()
        })
      })
    },
    handleSelectionChange() {},
    initFsddBar() {
      const fsddBar = echarts.init(this.$refs.fsddBar)
      const ledge = ['病房', '门急诊', '检查室', '实验室', '公共区域', '不明', '其他']
      ledge.reverse()
      const valArray = []
      const valObj = this.qualityInfo.fsdd
      for (const i in valObj) {
        valArray.push(valObj[i])
      }
      valArray.reverse()
      const option = {
        color: ['#EA5F8B', '#F9AF36', '#328A31', '#FFA9D9', '#4993C3', '#EDE663'],
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: ledge
        },
        series: [{
          name: '发生例数',
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            normal: {
              // 柱体的颜色
              // 右，下，左，上（1，0，0，0）表示从正右开始向左渐变
              color: function(params) {
                var colorList = [
                  ['#277fd6', '#8AADFF'],
                  ['#D81CCA', '#FFC5FB'],
                  ['#1CACD8', '#B7F2F3'],
                  ['#1CD874', '#BDFFE9'],
                  ['#B9D81C', '#E5F9BD'],
                  ['#D8731C', '#FFF7D1'],
                  ['#7526FF', '#E0C5FF']
                ]

                var colorItem = colorList[params.dataIndex]
                const acolor = colorItem[0]
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colorItem[0]
                },
                {
                  offset: 1,
                  color: colorItem[1]
                }
                ], false)
              }
            }
          },
          data: valArray
        }]
      }
      option && fsddBar.setOption(option)
      window.addEventListener('resize', function() {
        fsddBar.resize()
      })
    },
    initRyPie() {
      const ryPie = echarts.init(this.$refs.ryPie)
      const option = {
        color: ['#EA5F8B', '#F9AF36', '#328A31', '#FFA9D9', '#4993C3', '#EDE663'],
        tooltip: {
          trigger: 'item'
        },
        grid: {
          right: '4%',
          containLabel: true
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          top: 'center',
          align: 'left'
        },
        series: [{
          name: '事件上报人员数量',
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 0, name: '医生' },
            { value: 0, name: '护士' },
            { value: 0, name: '管理' },
            { value: 0, name: '学生' },
            { value: 0, name: '药剂' },
            { value: 0, name: '其他' }
          ]
        }]
      }
      option && ryPie.setOption(option)
      window.addEventListener('resize', function() {
        ryPie.resize()
      })
    },
    initTopCharts() {
      const topChart = echarts.init(this.$refs.topCharts)
      const option = {
        color: ['rgba(97, 73, 205, .6)'],
        title: {
          text: '事件数量（例）',
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['事件数量'],
          show: false
        },
        grid: {
          left: '20',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            interval: 0
          },
          data: ['诊疗相关', '药物相关', '医疗器械相关', '医患沟通相关', '输血相关', '护理相关', '院感相关', '手术相关', '防保相关', '意外事件', '其他不良事件上报']
        }],
        yAxis: [{
          type: 'value',
          minInterval: 1
        }],
        series: [{
          name: '事件数量',
          type: 'line',
          smooth: true,
          showSymbol: false,
          areaStyle: {
            opacity: 0.5,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(234, 95, 139, 1)'
            },
            {
              offset: 1,
              color: 'rgba(255, 255, 255, 1)'
            }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: this.qualityInfo.chartsCounts
        }]
      }
      option && topChart.setOption(option)
      window.addEventListener('resize', function() {
        topChart.resize()
      })
    },
    getPercent(val) {
      if (this.qualityInfo.allCount == 0 || val == 0) {
        return 0
      } else {
        const perc = this.calculatePercentage(parseInt(val), parseInt(this.qualityInfo.allCount))
        return parseFloat(perc.toFixed(1))
      }
    },
    calculatePercentage(numerator, denominator) {
      const percentage = (numerator / denominator) * 100
      const roundedPercentage = Math.round(percentage * 10) / 10 // 保留一位小数
      return roundedPercentage
    },
    getCurrentColor(percentage) {
      if (typeof this.color === 'function') {
        return this.color(percentage)
      } else if (typeof this.color === 'string') {
        return this.color
      } else {
        return this.getLevelColor(percentage)
      }
    },
    getLevelColor(percentage) {
      const colorArray = this.getColorArray().sort((a, b) => a.percentage - b.percentage)

      for (let i = 0; i < colorArray.length; i++) {
        if (colorArray[i].percentage > percentage) {
          return colorArray[i].color
        }
      }
      return colorArray[colorArray.length - 1].color
    },
    getColorArray() {
      const color = this.color
      const span = 100 / color.length
      return color.map((seriesColor, index) => {
        if (typeof seriesColor === 'string') {
          return {
            color: seriesColor,
            percentage: (index + 1) * span
          }
        }
        return seriesColor
      })
    }
  }
}

</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 12px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.box-card {
  border-radius: 10px;
}

::v-deep .el-tabs__item {
  padding-left: 16px !important;
  height: 50px;
  line-height: 50px;
}

::v-deep .el-progress__text {
    font-size: 14px;
    color: #606266;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0px;
    line-height: 1;
}

::v-deep .el-progress-bar {
    padding-right: 70px;
}

.statis-table {
  .statis-header {
    height: 50px;
    line-height: 50px;
    width: 100%;
    background: rgba(232, 239, 255, 1);
    padding: 0px 10px;
  }
}

.line-height-200 {
  line-height: 200px;
}

.line-height-100 {
  line-height: 100px;
}

.line-height-150 {
  line-height: 150px;
}

.statis-item {
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-progress-bar__inner {
  border-radius: 0px;
  background: linear-gradient(90deg, #277fd6 0%, #8AADFF 100%);
}

::v-deep .el-progress-bar__outer {
  border-radius: 0px;
  background-color: #e6ebf5;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}

::v-deep .el-progress__text {
  font-size: 17px !important;
}

</style>
